<template>
  <div>
    <div class="box">
      <Checkbox v-model="single">Single Checkbox</Checkbox>
      <p>{{ single }}</p>
    </div>

    <div class="box">
      <h1>单选多选加图标</h1>
      <Checkbox-group v-model="social">
        <Checkbox label="twitter">
          <Icon class="social-twitter">Twitter</Icon>
        </Checkbox>
        <Checkbox label="facebook">
          <Icon class="social-facebook">facebook</Icon>
        </Checkbox>
        <Checkbox label="github">
          <Icon class="social-github">github</Icon>
        </Checkbox>
        <Checkbox label="snapchat">
          <Icon class="social-snapchat">snapchat</Icon>
        </Checkbox>
      </Checkbox-group>
      <div>{{ social }}</div>

      <Checkbox-group v-model="fruit">
      <Checkbox label="香蕉"></Checkbox>
      <Checkbox label="苹果" disabled></Checkbox>
      <Checkbox label="葡萄"></Checkbox>
      <Checkbox label="芒果"></Checkbox>
    </Checkbox-group>
    <div>{{ fruit }}</div>
    </div>

    <div class="box">
      <h1>全选</h1>
      <div class="box">
        <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="clickSelectAll">全选</Checkbox>
      </div>
      <Checkbox-group v-model="checkAllGroup" @on-change="checkBoxChange">
        <Checkbox label="香蕉"></Checkbox>
        <Checkbox label="苹果"></Checkbox>
        <Checkbox label="西瓜"></Checkbox>
      </Checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      single: false,
      social: ['twitter'],
      fruit: ['苹果'],
      checkAllGroup: ['苹果'],
      checkAll: false,
      indeterminate: true
    }
  },
  mounted () {
    console.log(this.social)
  },
  methods: {
    clickSelectAll () {
      if(this.indeterminate) {
        this.checkAll = false;
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false;

      if(this.checkAll) {
        this.checkAllGroup = ['香蕉', '苹果', '西瓜']
      } else {
        this.checkAllGroup = []
      }
    },
    checkBoxChange () {
      console.log(this.checkAllGroup);
      if(this.checkAllGroup.length === 3) {
        this.indeterminate = false;
        this.checkAll = true
      } else if(this.checkAllGroup.length > 0) {
        this.indeterminate = true;
        this.checkAll = false
      } else {
        this.indeterminate = false;
        this.checkAll = false
      }
    }
  }
}
</script>

<style>
  .box {
    margin: 20px;
    padding: 20px;
    background-color: #fafafa;
  }
</style>